<template>
	<!-- 商铺专区 -->
	<view class="">
		<view class="item" v-for="(item,index) in list">
			<view class="acea-row  row-between sell-goods"
				@click="toPage('/pages/details/shopRent/shopRent?id='+item.id+'&storeCategory='+item.storeCategory+'&st='+item.status)">
				<view class="goods-img">
					<image src="@/static/images/cjflag.png" v-if="item.isUp == 2" mode="widthFix"
						style="position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);width: 230rpx;z-index: 90;">
					</image>
					<image :src="toImage(item)" mode="widthFix" style="width: 100%;"></image>
					<view class="tag line1" v-if="item.isVip == 1">
						好铺优选
					</view>
					<view class="acea-row distance">
						<image src="@/static/images/location.png" mode=""></image>
						<text>距您{{kmUnit(item.distance)}}</text>
					</view>
				</view>
				<view class="acea-row row-column goods-info">
					<view class="title line1">
						<!-- <span style="color: red;" v-if="item.isVip == 1">[VIP]</span> --> {{item.title}}
					</view>
					<view class="acea-row row-middle">

						<view class="sell-price">
							<text v-if="item.status == 1">{{ setFiled(item.bvileAvea  ?item.bvileAvea  +'㎡':'',item.bvileAvea  ?item.bvileAvea  +'㎡':'','') }}</text>
							<text v-else>{{ setFiled(item.avea?item.avea+'㎡':'',item.avea?item.avea+'㎡':'','请咨询') }}</text>
						</view>
						<!--<view class="sell-price" v-if="item.status == 1">
							<text>{{ setFiled(item.avea+'㎡',item.avea+'㎡','请咨询') }}</text>
						</view>
						<view class="sell-price" v-if="item.status == 2" >
							<text>{{ setFiled(item.avea+'㎡',item.avea+'㎡','请咨询') }}</text>
						</view> -->


						<view style="margin-left: 15rpx;">
							<view class="sell-price" v-if="item.status == 0">
								<text>{{ setFiled(item.rent&&item.isFace != 1?item.rent+'元/月':'',item.price&&item.isFace != 1?item.price+'元/月':'','面议') }}</text>
							</view>
							<view class="sell-price" v-if="item.status == 1">
								<text>{{ setFiled(item.salemoney?item.salemoney+'元/㎡':'',item.salemoney?item.salemoney+'元/㎡':'','面议') }}</text>
							</view>
							<view class="sell-price" v-if="item.status == 2">
								<text>{{ setFiled(item.rent&&item.isFace != 1?item.rent+'元/月':'',item.price&&item.isFace != 1?item.price+'元/月':'','面议') }}</text>
							</view>
						</view>


					</view>
					<view class="acea-row row-middle" v-if="item.status == 1">
						<view class="sell-price" v-if="item.status == 1" style="margin-right: 15rpx;">
							总价
							<text>{{ item.sellOunt?(Number(item.sellOunt)>10000?Number(item.sellOunt)/10000+'万':item.sellOunt+'元'):'面议' }}</text>
						</view>
						<view class="sell-price" v-if="item.returnInvestment">
							回报率：<text>{{ item.returnInvestment?setFiled(item.returnInvestment.replace('%','')+'%',item.salemoney.replace('%','')+'%','面议'):'' }}</text>
						</view>


						<!-- 	<view class="transfer-price" v-if="item.transferFee">转让费: <text>{{item.transferFee}} 万</text>
						</view> -->
						<!-- <view class="transfer-price" v-if="item.transfer_fee">转让费: <text>{{item.transfer_fee}} 万</text>
						</view> -->
					</view>
					<view class="acea-row row-middle" style="margin-bottom: 10rpx;">
						<!-- 				<view class="sell-price" v-if="item.status == 0" style="line-height: 44rpx;">
							转让费：<text>{{ setFiled(item.transferFee?item.transferFee+'万':'',item.price?item.price+'万':'','请咨询') }}</text>
						</view> -->
						<view class="sell-price" v-if="item.status == 2" style="line-height: 44rpx;">
							转让费：<text>{{ setFiled(item.transferFee&&item.transferStatus!=1?item.transferFee+'万':'面议',item.price?item.price+'万':'面议','面议') }}</text>
						</view>

					</view>

					<view class="acea-row goods-tag" v-if="item.storeAdvantage">
						<view class="tag-tit">优势：</view>
						<view class="tag" v-for="goods in item.storeAdvantage?item.storeAdvantage.split('/'):[]"
							:key="goods">{{goods}}</view>
					</view>
					<view class="acea-row goods-tag" v-if="item.store_advantage">
						<view class="tag-tit">优势：</view>
						<view class="tag" v-for="goods in item.store_advantage?item.store_advantage.split('/'):[]"
							:key="goods">{{goods}}</view>
					</view>
				</view>
			</view>
			<template v-if="!isMatch">
				<!-- 适合场所 -->
				<view class="suitable-box" v-if="isTozx">
					<text class="suitable" v-for="work in item.workingGroupName?item.workingGroupName.split('/'):[]"
						:key="work">{{work}}</text>
				</view>

				<view class="acea-row row-middle row-between visit-box" v-if="isTozx">
					<view class="visit-advtar-box">
						<view class="visit-advtar" @click="toVisitor(item)">
							<image :src="m.avatar" mode="" v-for="(m,ind) in item.managementResponse?item.managementResponse:[]"
								:key="ind" :style="{left: (20 * ind) + 'rpx'}"></image>
						</view>
						<!-- <view class="visit-num">{{item.view ||  0}}人浏览 已成功匹配{{item.matchingNum?item.matchingNum:0}}人 -->
						<view class="visit-num">{{item.view ||  0}}人浏览 已成功匹配{{ Math.floor(Math.random() * (500 - 50 + 1)) + 50 }}人 
						</view>
					</view>

					<view class="visit-l">
						<!-- <view class="visit-num">已有{{item.communication || 0}}人咨询</view> -->
						<view class="visit-num">已有{{ Math.floor(Math.random() * (500 - 50 + 1)) + 50 }}人咨询</view>
						<view class="visit-btn" @click="toConcat(item)">
							立即咨询
						</view>
					</view>

				</view>
			</template>
			<template v-else>

				<view class="acea-row row-middle row-between visit-box" v-if="isTozx">
					<view class="visit-advtar-box">
						<view class="visit-advtar" @click="toVisitor(item)">
							<image :src="m.avatar" mode="" v-for="(m,ind) in item.managementResponse?item.managementResponse:[]"
								:key="ind" :style="{left: (20 * ind) + 'rpx'}"></image>
						</view>
						<view class="visit-num">{{item.view ||  0}}人浏览 已成功匹配{{item.matchingNum?item.matchingNum:0}}人
						</view>
					</view>
			
					<view class="visit-l">
						<!-- <view class="visit-num">已有{{item.communication || 0}}人咨询</view> -->
						<view class="visit-num">已有{{ Math.floor(Math.random() * (500 - 50 + 1)) + 50 }}人咨询</view>
						<view class="visit-btn" @click="toConcat(item)">
							立即咨询
						</view>
					</view>
			
				</view>
			</template>
			

		</view>

	</view>
</template>

<script>
	const app = getApp();
	import {
		toPage
	} from '@/filters/commFilter.js'
	export default {
		// 商铺专区列表项
		name: 'shopArea',
		props: {
			list: {
				type: Array,
				default: () => {
					return [1, 1, 1]
				}
			},
			canClose: {
				type: Boolean,
				default: () => {
					return false
				}
			},
			detail: {
				type: Object,
				default: () => {
					return {}
				}
			},
			sort: {
				type: Array,
				default: () => {
					return []
				}
			},
			dstatus: {
				type: Number,
				default: 0
			},
			isTozx: {
				type: Boolean,
				default: () => {
					return true
				}
			},
			isMatch:{
				type: Boolean,
				default: () => {
					return false
				}
			}
		},
		data() {
			return {
				visitInfo: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],

			}
		},
		mounted() {


		},
		methods: {
			toPage,
			imgSrc(item) {
				let src = item.shopfrontPhoto || item.shopfront_photo
				return src ? src.split(',')[0] : '';
			},
			toImage(item) {
				let t = item.shopfrontPhoto ? item.shopfrontPhoto.split(',') : '';

				if (!t) {
					return this.$noImageShow
				}
				let sp = this.separateVideosAndImages(t);
				return sp.imageArray.length > 0 ? sp.imageArray[0] : this.$noImageShow

			},
			separateVideosAndImages(inputArray) {
				const videoArray = [];
				const imageArray = [];

				const videoExtensions = /\.(mp4|avi|mov)$/i;
				const imageExtensions = /\.(jpg|jpeg|png|gif)$/i;

				inputArray.forEach(item => {
					const extension = item.match(/\.[0-9a-z]+$/i)[0];

					if (extension.match(videoExtensions)) {
						videoArray.push(item);
					} else if (extension.match(imageExtensions)) {
						imageArray.push(item);
					}
				});

				return {
					videoArray,
					imageArray
				};
			},

			toConcat(item) {
				if (!item || !item.phoneExternal) {
					this.$util.Tips({
						title: '暂未获取到联系人'
					})
					return;
				}
				getApp().globalData.into_singleChatRoom({
					phone: item.phoneExternal,
					info: item
				})
			},
			setFiled(f1, f2, m) {
				return app.globalData.isChooseFile(f1, f2, m)
			},
			kmUnit(m) {
				m = Number(m)
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if(m>10000){
						m = 0;
					}
					if (m >= 1) {
						v = m.toFixed(2) + 'km'
					} else {
						v = (m*1000).toFixed(2) + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			getCategory(type) {
				let d = this.sort.filter(item => item.status == type)[0];
				if (!d) {
					return '';
				} else {
					return d.name;
				}
			},
			toVisitor(data) {
				
				if(data.status == 1){
					data.vistype = 8
				}
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=&data=" + JSON.stringify(
						data)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "index.scss";

	.item .sell-goods .goods-info .transfer-price {
		font-size: 28rpx;
	}

	.goods-info {
		flex-wrap: nowrap;
		padding: 0 20rpx 20rpx;
	}

	.item {
		.sell-goods {
			align-items: flex-start;
			justify-items: flex-start;

			.goods-info {
				height: auto;
			}
		}
	}


	.contact-info {
		width: 70%;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}


		.name {
			width: calc(100% - 100rpx);
			height: 70rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
			margin-left: 24rpx;
		}
	}

	.visit-l {
		width: 30%;

		.visit-num {
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);
			margin-bottom: 12rpx;
		}

		.visit-btn {
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			opacity: 1;
			border-radius: 30rpx;
			background: rgba(238, 33, 45, 1);
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
	}
</style>